<template>
    <v-sheet class="app">
        <v-layout class="full-screen">
            <!-- 底部栏 -->
            <v-app-bar class="bottom-bar" location="bottom" height="100">
                <PlayBar></PlayBar>
            </v-app-bar>

            <!-- 侧边栏 -->
            <v-navigation-drawer class="nav-bar" permanent>
                <div class="wrapper">
                    <!-- Logo 以及 标题 -->
                    <div data-tauri-drag-region class="dragglable">
                        <img
                            src="/mp4game.svg"
                            alt="Tauri logo"
                            style="margin-left: 16px; height: 20px"
                            data-tauri-drag-region
                        />
                        <span class="mx-4 window-title" data-tauri-drag-region>
                            {{ playlist.player.id !== "" ? playlist.player.name : WindowName }}
                        </span>
                    </div>

                    <!-- 菜单 -->
                    <el-scrollbar class="scrollbar">
                        <Menu></Menu>
                    </el-scrollbar>
                </div>
            </v-navigation-drawer>

            <!-- 主体 -->
            <v-main>
                <!-- 顶部按钮 -->
                <div data-tauri-drag-region class="dragglable" style="justify-content: end">
                    <title-bar-button icon="mdi-arrow-left" @click="router.back()"></title-bar-button>
                    <title-bar-button
                        :icon="theme.dark ? 'mdi-weather-night' : 'mdi-weather-sunny'"
                        @click="theme.toggleDark()"
                    ></title-bar-button>
                    <title-bar-button icon="mdi-window-minimize" @click="appWindow.minimize()"></title-bar-button>
                    <title-bar-button icon="mdi-window-maximize" @click="appWindow.toggleMaximize()"></title-bar-button>
                    <title-bar-button
                        icon="mdi-window-close"
                        @click="WindowApi.setWindowVisiblity(false)"
                    ></title-bar-button>
                </div>

                <!-- 页面内容 -->
                <div class="mx-4 my-2 main">
                    <router-view v-slot="{ Component, route }">
                        <transition :name="<string>route.meta.transition ?? ''">
                            <component :is="Component"></component>
                        </transition>
                    </router-view>
                </div>
            </v-main>
        </v-layout>

        <!-- 全局消息提示框 -->
        <snack-bar-message
            v-model="messageState.visible"
            :message="messageState.text"
            :timeout="messageState.timeout"
            :closeable="messageState.closeable"
        />

        <!-- 全局遮罩 -->
        <v-overlay class="overlay" v-model="overlayState.visible" contained>
            <h1 class="title">{{ overlayState.text }}</h1>
        </v-overlay>
    </v-sheet>
</template>

<script setup lang="ts">
import { watch } from "vue";
import { useRouter } from "vue-router";
import { appWindow } from "@tauri-apps/api/window";
import { type UnlistenFn, listen } from "@tauri-apps/api/event";
import { WindowApi } from "@/lib/api";
import { Playlist } from "@/lib/playlist";
import { WindowName } from "@/lib/constants";
import { provideMessageState, provideOverlayState } from "@/lib/view";
import usePlaylistStore from "@/store/playlist";
import useShortcutStore from "@/store/shortcut";
import useThemeStore from "@/store/theme";
import Menu from "@/components/Menu.vue";
import PlayBar from "@/components/PlayBar.vue";
import TitleBarButton from "@/components/TitleBarButton.vue";
import SnackBarMessage from "@/components/public/message/SnackBarMessage.vue";

const router = useRouter();

const playlist = usePlaylistStore();
const shortcut = useShortcutStore();
const theme = useThemeStore();

const unlistens: UnlistenFn[] = [];

// 全局消息状态
const messageState = provideMessageState();

// 全局遮罩状态
const overlayState = provideOverlayState();

// 注册控制窗口 显示/隐藏 的快捷键
const visibilityShortcut = shortcut.register("window-visibility");
visibilityShortcut.description = "控制窗口显示/隐藏";
shortcut.bind("window-visibility", async () => {
    try {
        const visible = await WindowApi.isWindowVisible();
        await WindowApi.setWindowVisiblity(!visible);
    } catch (error) {
        console.error("控制窗口 显示/隐藏 失败", error);
    }
});

/**
 * 监听播放器信息
 */
watch(
    () => [playlist.player.id, playlist.player.name],
    ([id, name]) => {
        if (id === "") {
            appWindow.setTitle(WindowName);
        } else {
            appWindow.setTitle(name);
        }
    },
);

/**
 * 窗口启动后，监听拖动事件
 */
window.addEventListener("load", () => {
    Promise.all([
        // 文件拖入
        listen<string[]>("tauri://file-drop-hover", () => {
            overlayState.visible = true;
            overlayState.text = "松开将拖拽的 Midi 文件添加到播放列表中";
        }),
        // 文件拖拽松开
        listen<string[]>("tauri://file-drop", () => {
            overlayState.visible = false;
        }),
        // 文件拖出或取消
        listen<void>("tauri://file-drop-cancelled", () => {
            overlayState.visible = false;
        }),
    ]).then((values) => {
        unlistens.push(...values);
    });
});

/**
 * 监听窗口关闭事件
 */
window.addEventListener("beforeunload", async () => {
    for (const unlisten of unlistens) {
        unlisten();
    }
    unlistens.length = 0;

    await Promise.all([
        // 停止播放
        Playlist.Player.close(playlist.playlist),
        // 销毁快捷键
        shortcut.close(),
        // theme 停止监听
        theme.unlisten(),
    ]);
});
</script>

<style scoped lang="scss">
.app {
    background-color: transparent !important;

    .full-screen {
        width: 100vw;
        height: 100vh;

        .dragglable {
            width: 100%;
            height: 48px;
            user-select: none;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .bottom-bar {
            overflow: visible;
            background-color: transparent !important;
        }

        .main {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: calc(100% - 48px);
            overflow: hidden;

            .empty {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                user-select: none;
                width: 100%;
                height: 100%;
            }
        }

        .nav-bar {
            background-color: transparent !important;

            .wrapper {
                display: flex;
                flex-direction: column;
                width: 100%;
                height: 100%;

                .window-title {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    width: 0;
                    flex-grow: 1;
                }

                .scrollbar {
                    height: 0;
                    flex-grow: 1;
                    width: 100%;
                }
            }
        }
    }

    .overlay {
        display: flex;
        align-items: center;
        justify-content: center;

        .title {
            user-select: none;
        }
    }
}
</style>
